<script setup>
	import { designStore } from '@/views/plugin/dashboard/store'
	import { cloneDeep } from 'lodash-es'
	import { computed, nextTick, ref, watch } from 'vue'

	const styleKey = ref(0)
	const activeKey = ref(1)
	const previewRef = ref(null)
	const useDesignStore = designStore()

	// 本地配置，用于预览
	const previewConfig = ref(cloneDeep(useDesignStore.selectedComponent))
	// 拖拽记录 拖拽的元素
	const dragstart = (item) => {
		useDesignStore.activeDragAddItem = item
	}
	// 预设
	const componentsPresets = computed(() => {
		const selected = useDesignStore.pesetsList.find((d) => d.type === useDesignStore.selectedComponent.type)
		// const original = componentsList.value.find((d) => d.type === useDesignStore.selectedComponent.type)
		// const original = previewConfig.value
		return (
			selected?.pesetsList.map((d) => {
				return {
					...cloneDeep(useDesignStore.selectedComponent),
					style: d
					// data: original.data // 防止预设变化
				}
			}) || []
		)
	})
	// 组件仅展示 大类
	const componentsList = computed(() => {
		return useDesignStore.componentsConfigList || []
	})
	// 修改选中的数据
	const upDataConfig = (value) => {
		previewConfig.value = cloneDeep(value)
		// nextTick 解决不同步问题
		nextTick(() => {
			// 更新预览配置
			if (previewRef.value && previewRef.value.onReload) {
				previewRef.value.onReload()
			}
		})
	}
	watch(
		() => useDesignStore.selectedComponent.i,
		() => {
			activeKey.value = 1
			styleKey.value = 0
		}
	)
	// 抽屉状态
	const open = ref(false)

	// 监听store中的drawerStatus变化，更新open状态
	watch(
		() => useDesignStore.drawerStatus,
		(newVal) => {
			open.value = newVal !== 0
		},
		{ immediate: true }
	)

	// 监听selectedComponent变化，更新预览配置
	watch(
		() => useDesignStore.selectedComponent,
		(newVal) => {
			previewConfig.value = cloneDeep(newVal)
		},
		{ immediate: true, deep: true }
	)

	// 抽屉标题
	const drawerTitle = computed(() => {
		const drawerTitle = {
			1: '样式配置',
			2: '数据配置'
		}
		return drawerTitle[useDesignStore.drawerStatus]
	})
	// 关闭抽屉
	const onClose = () => {
		useDesignStore.drawerStatus = 0
		useDesignStore.selectedComponentRef = null
	}

	// 数据表单引用
	const dataFormRef = ref(null)

	// 保存配置
	const saveConfig = () => {
		//  更新store中的数据
		useDesignStore.selectedComponent = previewConfig.value
		const activated = useDesignStore.selectedComponent || {}
		const index = useDesignStore.canvasSourceData.findIndex((d) => d.i === activated.i)
		useDesignStore.canvasSourceData.splice(index, 1, cloneDeep(previewConfig.value))

		nextTick(() => {
			// 获取对应组件的ref引用
			const componentRef = useDesignStore.selectedComponentRef
			// 如果组件存在且有reload方法，则调用
			if (componentRef && typeof componentRef.onReload === 'function') {
				componentRef.onReload()
			}
			// 关闭抽屉
			onClose()
		})
	}
</script>
<template>
	<a-drawer :open="open" :title="drawerTitle" :width="1100" placement="right" @close="onClose">
		<!-- 预览区域 -->
		<div class="preview-container mb-4 border rounded">
			<component
				:is="useDesignStore.selectedComponent.name"
				:style="{
					width: `${useDesignStore.selectedComponent.previewW || '100%'}`,
					height: `${useDesignStore.selectedComponent.previewH || '100%'}`
				}"
				ref="previewRef"
				:config="previewConfig"
			/>
		</div>
		<!-- 配置区域 -->
		<template v-if="useDesignStore.drawerStatus === 1">
			<a-radio-group v-model:value="styleKey" button-style="solid" style="width: 100%">
				<a-radio-button :value="0" style="width: 50%; text-align: center">系统预设</a-radio-button>
				<a-radio-button :value="1" style="width: 50%; text-align: center">自定义样式</a-radio-button>
			</a-radio-group>
			<div class="py-[20px]">
				<div v-if="styleKey === 0">
					<a-row :gutter="[16, 24]">
						<a-col class="gutter-row" :span="12" v-for="(item, index) in componentsPresets" :key="index">
							<div
								@click="upDataConfig(item)"
								class="preview cursor-pointer h-[150px] border_s self-animation-zoom overflow-hidden"
							>
								<component
									:is="item.name"
									:config="item"
									:key="item.i + index"
									class="origin-top-left"
									:style="{
										width: `${item.viewW || '100%'}`,
										height: `${item.viewH || '100%'}`,
										// transform: `scale(${item.viewS || 1})`,
										boxShadow: 'none !important'
									}"
								/>
							</div>
						</a-col>
					</a-row>
				</div>
				<div v-if="styleKey === 1" style="height: calc(100vh - 200px)" class="overflow-y-auto">
					<component
						:is="useDesignStore.selectedComponent.name + 'StyleForm'"
						:config="useDesignStore.selectedComponent"
						@upDataConfig="upDataConfig"
					/>
				</div>
			</div>
		</template>
		<template v-if="useDesignStore.drawerStatus === 2">
			<component
				:is="useDesignStore.selectedComponent.name + 'DataForm'"
				:key="useDesignStore.selectedComponent.i + 'DataForm'"
				:config="useDesignStore.selectedComponent"
				@upDataConfig="upDataConfig"
				ref="dataFormRef"
			/>
		</template>

		<!-- 抽屉底部按钮 -->
		<template #footer>
			<div class="drawer-footer">
				<a-button @click="onClose">取消</a-button>
				<a-button type="primary" @click="saveConfig" style="margin-left: 8px">保存</a-button>
			</div>
		</template>
	</a-drawer>
</template>

<style scoped lang="less">
	.box {
		cursor: pointer;
		width: calc(50% - 5px);
		height: 150px;
		border: 1px solid #eeeff0;
		border-radius: 2px;
		margin-top: 10px;
	}

	.box:nth-of-type(1),
	.box:nth-of-type(2) {
		margin-top: 0px;
	}

	.box .title {
		background: #f5f6f7;
		font-size: 14px;
		font-weight: 500;
		padding: 0px 10px;
		display: flex;
		align-items: center;
		height: 36px;
	}

	.border-t {
		border-top: 1px solid #eeeff0;
	}

	.border_s {
		border-radius: 2px;
		border: 1px solid #ebebeb;
	}
	.preview {
		position: relative;
	}
	.preview::before {
		display: block;
		content: '';
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 2;
	}
</style>
